@use "sass:math";
@import "./Page";
@import "../../css/heading-anchor";

.docs {
  .docs-content {
    .docs-content-wrapper {
      display: flex;
      justify-content: space-between;

      aside {
        flex: 0 0 17rem;

        .docs-content-wrapper-sidebar {
          position: sticky;
          top: 7em;
        }

        .search-panel {
          margin-top: 1rem;
          width: 100%;

          .search-results {
            max-height: calc(100vh - 10rem - 1px);
          }
        }

        .docs-content-toc {
          margin-top: 1rem;
          overflow-y: auto;
          max-height: calc(100vh - 10rem - 3px);

          #toctitle {
            display: none;
          }

          ul {
            margin-top: 0;
            padding-left: 0;
            list-style-type: none;

            &.sectlevel2 {
              display: none;
            }

            li {
              padding: math.div($spacer, 3) 0;
            }
          }
        }

        &.docs-has-search-results .docs-content-toc {
          display: none;
        }

        @media (max-width: $xl) {
          flex: 0 0 15rem;
        }

        @media (max-width: $lg) {
          z-index: 1;
          position: fixed;
          top: 0;
          right: 0;
          width: 25rem;
          height: 100vh;
          max-width: 100%;
          padding-top: 6rem;
          padding-left: $spacer * 2;
          padding-right: $spacer * 2;
          background-color: #fff;
          border-left: 1px solid $gray-300;
          transform: translateX(100%);
          transition: transform 200ms ease-in-out;
          will-change: transform;

          &.collapse {
            transform: translateX(0%);
          }
        }

        @media (max-width: $sm) {
          min-width: 100%;
          border-left: none;
        }
      }

      .docs-content-sidebar-toggle {
        z-index: 1000;
        cursor: pointer;
        display: none;
        position: fixed;
        justify-content: center;
        align-items: center;
        right: $spacer * 2;
        bottom: $spacer * 2;
        color: #fff;
        background-color: $gray-700;
        padding: math.div($spacer, 2);
        border-radius: $border-radius;
        transition: $button-background-transition;

        .feather-list, .feather-x {
          display: block;
        }

        .feather-x {
          position: absolute;
          left: 0;
          top: 0;
          opacity: 0;
          transition: opacity $button-transition-time $button-transition-ease;
        }

        &:hover {
          background-color: $gray-800;
        }

        &.collapse {
          .feather-list {
            opacity: 0;
          }

          .feather-x {
            opacity: 1;
          }
        }

        @media (max-width: $lg) {
          display: flex;
        }

        @media (max-width: $sm) {
          right: $spacer;
          bottom: $spacer;
        }
      }
    }

    .docs-content-inner {
      max-width: calc(100% - 19.5rem);
      overflow: hidden;

      .docs-content-metadata {
        margin-top: $spacer * 1.2;
        margin-bottom: $spacer * 1.2;
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;

        @media (max-width: $lg) {
          flex-direction: column;
        }

        .docs-content-metadata-repo {
          display: flex;
        }

        .docs-content-metadata-left {
          display: flex;
          align-items: center;
          flex: 1;

          & > * {
            margin-right: $spacer * 2;
          }

          & > *:last-child {
            margin-right: 0;
          }

          a {
            display: flex;
            align-items: center;
            color: $gray-600;
            white-space: nowrap;

            &:hover {
              color: $primary;
            }

            .feather {
              margin-right: 0.25em;
              height: 1rem;
            }
          }

          @media (max-width: $lg) {
            flex-wrap: wrap;
            margin-bottom: $spacer;
          }
        }

        .docs-content-metadata-version {
          flex: 1;
          display: flex;

          @media (min-width: $lg) {
            justify-content: flex-end;
          }

          svg {
            height: 16px;
            margin-bottom: -2px;

            @media (max-width: $lg) {
              height: 1rem;
              margin-bottom: -1px;
            }
          }

          .dropdown-menu a {
            text-decoration: none;

            &:hover {
              color: $gray-600;
            }
          }
        }

        .docs-content-metadata-label {
          display: flex;
          margin-left: $spacer * 2;
        }
      }

      h1 {
        padding-top: 0;
        margin-top: 0.6rem;
        line-height: 1.2;

        &::after {
          content: "";
          width: 30%;
          display: block;
          border: 2px solid $primary;
          border-radius: 2px;
          margin-top: 1.1rem;
        }
      }

      .ulist > ul {
        padding-left: 1.1rem;
      }

      h2 {
        border-top: 1px solid $gray-300;
        margin-top: $spacer * 5;
        padding-top: $spacer * 2;
      }

      h3, h4 {
        margin-top: $spacer * 3;
      }

      @media (max-width: $xl) {
        max-width: calc(100% - 17.5rem);
      }

      @media (max-width: $lg) {
        max-width: 100%;
      }
    }

    .admonitionblock {
      border-top-right-radius: $border-radius;
      border-bottom-right-radius: $border-radius;
      background-color: $gray-100;
      padding: $spacer;
      margin: $spacer * 1.5 0;
      border-left: 9px solid transparent;

      &.note, &.tip {
        border-color: #6cb9f0;
      }

      &.important, &.warning, &.caution {
        border-color: #f0a46c;
      }

      tr {
        display: flex;
        flex-direction: column;
      }

      .title {
        font-weight: 400;

        &::after {
          content: ":";
        }
      }
    }

    dt {
      font-weight: 400;
    }

    @include heading-anchor("anchor");
  }
}
